<template>
    <div id="shadow-box">
        <slot>阴影效果组件提交</slot>
    </div>
</template>
<script>
export default {
    name: "BankShadowBox",
    data() {
        return {}
    },
    props: {}
}
</script>
<style lang="less" scoped>
#shadow-box {
    z-index: 1000;
    top: 0;
    height: 100px;
    line-height: 100px;
    font-size: 40px;
    width: 100%;
    position: sticky;
    // 路径渐变
    background-image:  radial-gradient(transparent 1px, #fff 1px);
    // 背景缩放
    background-size: 4px 4px;
    // 元素后面区域添加 饱和度  模糊效果
    backdrop-filter: saturate(0.5) blur(4px);
}
</style>
